
$(document).ready(function () {
    replayScoreChart()


})



// 成绩回放折线图
function replayScoreChart() {

    new AjaxChain()
        .setUrl('/train/score/teamtrain/detail')
        .setData(
            { uuid: 1742804870337 }
        )
        .then(resdata => {


            // 初始化图表
            var chartDom = document.getElementById('v-chart');
            var chart = echarts.init(chartDom);

            // 跑步人员配置（头像路径需要替换为实际地址）


            var runners = [
            ];

            var sData = []
            $.each(resdata, function (e, i) {
                runners.push(
                    { name: i.personName,  avatar: '/images/' + i.photoPath }
                )
                sData.push(i.uwbScoreList)

            })


            // 初始化选项配置
            const option = {
                legend: {
                    data: runners.map(r => r.name),
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                        //				padding: [3, 20, 5, 7]
                    },
                },
                grid: {
                    left: "5%",
                    right: "5%",
                    bottom: "10%"
                },
                xAxis: {
                    type: 'time',
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                            width: 4
                        }
                    },
                    offset: 20,
                    axisLabel: {
                        formatter: function (value) {
                            return new Date(value).toLocaleTimeString();
                        },
                        textStyle: {
                            color: "#fff",
                            fontSize: 16,
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '距离（米）',
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 18
                    },
                    interval: function (index, value) {
                        // 只显示第一个和最后一个标签
                        if (index === 0 || index === value.length - 1) {
                            return true;
                        }
                        return false;
                    },
                    splitLine: { show: false },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 16
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#FA6DA8',
                            shadowBlur: 5,
                            shadowColor: '#FA6DA833',
                            shadowOffsetY: 10,
                        },
                    },
                },
                series: runners.map(r => ({
                    name: r.name,
                    type: 'line',
                    // smooth: true,
                    data: [],
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: r.color,
                            shadowBlur: 10,
                            shadowColor: r.color,
                            shadowOffsetY: 3,
                        },
                    },
                    markPoint: {
                        symbol: 'pin',

                        symbol: `image://${r.avatar}`,
                        symbolSize: [40, 40],
                        symbolOffset: [0, -20],
                        label: {
                            show: true, // 开启显示
                            position: 'inside', // 在上方显示
                            formatter: r.name,
                            // textStyle: { // 数值样式
                            //   color: '#22b8ed',
                            //   fontSize: 16
                            // },
                            // color: '#fff',
                            // backgroundColor: '#36a3f7',
                            // borderRadius: 4,
                            // padding: [4, 8]
                        }
                        ,
                        data: []
                    }
                }))
            };

            // 初始化跑步距离和存储数据
            const distances = Array(runners.length).fill(0);
            const seriesData = Array(runners.length).fill().map(() => []);
            var bgPosition = 0;
            var minY = 0;

            var time1 = setInterval(() => {
                // 更新背景位置
                bgPosition = (bgPosition + 0.02) % 100;

                document.getElementById('v-chart').style.backgroundPosition =
                    `${bgPosition}% 50%`;

            }, 20); // 每200毫秒更新一次

            // 设置定时器更新数据
            var clockTimes=0;
            var time2 = setInterval(() => {
                const now = new Date();



                sData.forEach((item, index) => {


                    const newData = [(item[clockTimes].useTime)||null, (item[clockTimes].distance)||null];

                    // 更新数据存储

                    // if (seriesData[index].length > 20) {
                    //     seriesData[index].splice(0, 1);
                    // }
                    seriesData[index].push(newData);
                    // minY += 0.05;
                    option.yAxis.min = parseInt(minY)


                    // 更新图表配置
                    option.series[index].data = seriesData[index];
                    option.series[index].markPoint.data = [{
                        coord: newData,
                        // symbol: `image://${runners[index].avatar}`,
                        // symbolSize: [40, 40]
                    }];

                });
                clockTimes=clockTimes+1;


                // 自动滚动时间轴（显示最近30秒数据）
                // option.xAxis.min = new Date(now - 30000);
                // option.xAxis.max = new Date(now + 2000);

                chart.setOption(option);
            }, 100); // 每200毫秒更新一次



            // 初始配置
            chart.setOption(option);


        })
        .send();




}



